<script setup lang="ts">
import { $t } from '@vben/locales';
import { Pencil, Copy, FileText, Trash2 } from '@vben/icons';
import dayjs from 'dayjs';
defineOptions({ name: 'ExamList' });

import CustomPopover from '#/components/custom-popover.vue';

defineProps({
  tableList: {
    type: Array,
    default: () => []
  },
  copyExam: {
    type: Function,
    default: () => { }
  },
  editExam: {
    type: Function,
    default: () => { }
  },
  detailExam: {
    type: Function,
    default: () => { }
  },
  deleteExam: {
    type: Function,
    default: () => { }
  },
  toCorrect: {
    type: Function,
    default: () => { }
  }
});

const statusColors = {
  new: '#1677FF',
  published: '#44A614',
  begin: '#C07418',
  end: '#557283'
}
const statusBgColors = {
  new: '#1677FF33',
  published: '#52C41A33',
  begin: '#FFA94033',
  end: '#7997A833'
}

const getExamTime = (data: any) => {
  if (!data?.beginTime) return '--'
  const time = new Date(data.beginTime).getTime() + data.duration * 60 * 1000
  const endTime = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
  return `${data.beginTime}~${endTime}`
}

</script>
<template>
  <div class="exam-list-war">
    <div class="bg-[#F2F7FD] rounded-sm mb-[16px] last-of-type:mb-[0px]" v-for="(item, index) in tableList as any"
      :key="index">
      <div class="border-b border-color:#DCDFE6 pt-[16px] pl-[16px] pb-[16px] pr-[16px] text-[14px]">
        <div class="flex justify-between items-center mb-[16px]">
          <div
            class="flex-auto flex items-center pr-[10px] font-bold text-[#191919] overflow-hidden whitespace-nowrap text-ellipsis">
            <span
              class="w-[50px] h-[20px] leading-[16px] font-normal rounded-sm bg-[#1677ff33] text-[12px] text-[#1677ff] text-center pt-[2px] pb-[2px] pl-[8px] pr-[8px] mr-[15px]"
              :style="{ color: statusColors[item.status as keyof typeof statusColors], background: statusBgColors[item.status as keyof typeof statusColors] }">{{
                item.status ? $t(`exam.${item.status}StatusTxt`) : '--' }}</span>
            <CustomPopover :strTxt="item.name ?? '--'"></CustomPopover>
          </div>
          <div class="flex-none">
            <el-tooltip effect="dark" :content="$t('common.editTxt')" :show-after="1000" placement="top">
              <el-badge class="mr-[12px]" :is-dot="!!item.draft && item.status === 'published'">
                <el-button :disabled="item.status === 'begin' || item.status === 'end'" class="p-[5px] text-[16px]" link
                  @click="editExam(item)" :icon="Pencil"></el-button>
              </el-badge>
            </el-tooltip>
            <el-tooltip effect="dark" :content="$t('common.copyTxt')" :show-after="1000" placement="top">
              <el-button class="p-[5px] text-[16px]" link @click="copyExam(item)" :icon="Copy"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" :content="$t('common.detailTxt')" :show-after="1000" placement="top">
              <el-button class="p-[5px] text-[16px]" link @click="detailExam(item)" :icon="FileText"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" :content="$t('common.deleteTxt')" :show-after="1000" placement="top">
              <el-button :disabled="item.status !== 'new' && item.status !== 'published'" class="p-[5px] text-[16px]"
                link @click="deleteExam(item)" :icon="Trash2"></el-button>
            </el-tooltip>
          </div>
        </div>
        <div class="flex exam-info-war">
          <div class="exam-info-item course-name-war flex-none flex mr-[4.2%]">
            <span class="mr-[8px] text-[#909399]">{{ $t('exam.examCourseLabel') }}</span>
            <CustomPopover :strTxt="item.courseName ?? '--'"></CustomPopover>
          </div>
          <div class="exam-info-item mr-[4.2%]">
            <span class="mr-[8px] text-[#909399]">{{ $t('exam.examTypeLabel') }}</span>
            <span class="text-[#191919]">{{ $t(`exam.${item.mode}`) }}</span>
          </div>
          <div class="exam-info-item certification-name-war mr-[4.2%] flex-none flex">
            <span class="mr-[8px]  text-[#909399]">{{ $t('exam.linkCert') }}</span>
            <CustomPopover :strTxt="item.certificationName ?? '--'"></CustomPopover>
          </div>
          <div class="exam-info-item">
            <span class="mr-[8px] text-[#909399]">{{ $t('exam.examTime') }}</span>
            <span class="text-[#191919]">{{ getExamTime(item) }}</span>
          </div>
        </div>
      </div>
      <div class="pr-[16px] pl-[16px] box-border">
        <div
          class="pt-[16px] pb-[16px] text-[14px] box-border flex items-center border-b border-color:#DCDFE6 last-of-type:border-none"
          v-for="(classItem, j) in item.organizationScoreDTOList as any" :key="j">
          <div class="w-[240px] pr-[5.2%] font-bold">
            <CustomPopover :strTxt="classItem.name ?? '--'"></CustomPopover>
          </div>
          <div class="w-[calc((100%-240px-5.2%)/2)] flex items-center pr-[5.2%]">
            <span class="whitespace-nowrap mr-[16px]">{{ $t('exam.submitted') }}</span>
            <div class="w-full h-[14px] rounded-md bg-[#DCDFE6] relative">
              <span :style="{ color: classItem.committedCount ? '#fff' : 'inherit' }"
                class="text-xs absolute top-[50%] translate-y-[-50%] left-[5px] z-[2]">{{ classItem.committedCount }} /
                {{ classItem.total }}</span>
              <div :style="{ width: `${Math.floor((classItem.committedCount / classItem.total) * 100)}%` }"
                class="h-full leading-[100%] bg-[#0067D1] rounded-md absolute bottom-0 left-0 whitespace-nowrap">
              </div>
            </div>
          </div>
          <div class="w-[calc((100%-240px-5.2%)/2)] flex items-center pr-[5.2%]">
            <span class="whitespace-nowrap mr-[16px]">{{ $t('exam.corrected') }}</span>
            <div class="w-full h-[14px] rounded-md bg-[#DCDFE6] relative">
              <span :style="{ color: classItem.correctedCount ? '#fff' : 'inherit' }"
                class="text-xs absolute top-[50%] translate-y-[-50%] left-[5px] z-[2]">{{ classItem.correctedCount }} /
                {{ classItem.total }}</span>
              <div :style="{ width: `${Math.floor((classItem.correctedCount / classItem.total) * 100)}%` }"
                class="h-full leading-[100%] bg-[#0067D1] rounded-md absolute bottom-0 left-0 whitespace-nowrap">
              </div>
            </div>
          </div>
          <el-button link :disabled="item.mode === 'offline' || item.mode === 'online' && item.status !== 'end'"
            type="primary" @click="toCorrect(item, classItem)">{{ $t('exam.toCorrect') }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.exam-list-war {
  width: 100%;
  height: auto;
}

.course-name-war {
  max-width: 500px;
}

.certification-name-war {
  max-width: 300px
}

.course-name {
  min-width: 100px;
  max-width: calc(100% - 40px)
}

.exam-info-war {
  width: 100%;
}

@media (max-width: 1536px) {
  .exam-info-war {
    flex-wrap:wrap!important;
  }
  .certification-name-war {
    max-width: auto!important;
  }
  .exam-info-item {
    flex: 50%!important;
    min-width: 50%!important;
    width: calc(100% /2)!important;
    margin-right: 0px!important;
    padding-right: 20px!important;
    &:nth-of-type(1), &:nth-of-type(2) {
      margin-bottom: 10px!important;
    }
  }
}
</style>
